WIP: Add search functionality#10
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
I need of the a light about |
Nick-Gabe
left a comment
Nick-Gabe
left a comment
There was a problem hiding this comment.
I actually couldn't see the appearance since the preview deployment failed.
So I only analyzed the code, but overall it's going in a nice direction! :)
Also sorry for reviewing it soo late, I didn't see this pr 😅
| const { t } = useTranslation(); | ||
|
|
||
| const [isOpen, setIsOpen] = useState(false); | ||
| const [historic, setHistoric] = useState<Array<string>>([]); |
There was a problem hiding this comment.
pls also change other types to [] and historic to history
| const [historic, setHistoric] = useState<Array<string>>([]); | |
| const [history, setHistory] = useState<string[]>([]); |
| } | ||
|
|
||
| export const SearchComponent = forwardRef<SearchComponentHandler>((_, ref) => { | ||
| const { t } = useTranslation(); |
There was a problem hiding this comment.
| const { t } = useTranslation(); | |
| const { t } = useTranslation(); |
| const backdropRef = useRef<HTMLDivElement>(null); | ||
| const navigate = useNavigate(); | ||
|
|
||
| const storedItems = useRef<Array<string>>(JSON.parse(localStorage.getItem("searchItems") || "[]")).current; |
There was a problem hiding this comment.
I think "previousSearches" is a better name, both for variable and storage
| const queryParams = new URLSearchParams(location.search); | ||
| const query = queryParams.get("query"); | ||
|
|
||
| // ADD SEARCH LOGIC |
There was a problem hiding this comment.
I believe it would use Dev.to's algolia, for example here's the full fetch it does for searching "javascript":
fetch("https://prsobfp46h-dsn.algolia.net/1/indexes/Article_production/query?x-algolia-agent=Algolia%20for%20JavaScript%20(4.23.3)%3B%20Browser%20(lite)&x-algolia-api-key=9aa7d31610cba78851c9b1f63776a9dd&x-algolia-application-id=PRSOBFP46H", {
"headers": {
"accept": "*/*",
"accept-language": "en-US,en;q=0.9,pt;q=0.8",
"cache-control": "no-cache",
"content-type": "application/x-www-form-urlencoded",
"pragma": "no-cache",
"priority": "u=1, i",
"sec-ch-ua": "\"Chromium\";v=\"137\", \"Not/A)Brand\";v=\"24\"",
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": "\"macOS\"",
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "cross-site"
},
"referrer": "https://dev.to/",
"referrerPolicy": "strict-origin-when-cross-origin",
"body": "{\"query\":\"javascript\",\"hitsPerPage\":\"60\",\"queryType\":\"prefixNone\",\"page\":\"0\"}",
"method": "POST",
"mode": "cors",
"credentials": "omit"
});but it seems indeed a bit complicated, so if you prefer i can continue this myself, just let me know! 🫂
| "react-dom": "^19.0.0", | ||
| "react-i18next": "^15.4.1", | ||
| "react-infinite-scroll-component": "^6.1.0", | ||
| "react-router-dom": "^7.3.0", |
There was a problem hiding this comment.
react-router-dom is actually kind of deprecated, they recommend to use react-router now
| toggle: () => void; | ||
| } | ||
|
|
||
| export const SearchComponent = forwardRef<SearchComponentHandler>((_, ref) => { |
There was a problem hiding this comment.
Technically, instead of using a ref you could simply use an external state which decides to render or not this component. But I liked your idea actually, it adds a bit more complexity but goes in the same way as TikTok, which for example shows "search buttons" in comments, that when clicked open the search from there and perform it straight away.
Good job! 😄👍
| toggle: () => { | ||
| setIsOpen(!isOpen); | ||
| } |
There was a problem hiding this comment.
Instead of toggle, what do you think of two separate functions: show/hide
whereas show also receives an argument specifying the search to be done.
| > | ||
| <div className="p-6"> | ||
| <button | ||
| onClick={() => setIsOpen(!isOpen)} |
There was a problem hiding this comment.
I like to think of this conceptually. Would it make sense for a close button to end up opening the search? Given this, it's better to be explicit
| onClick={() => setIsOpen(!isOpen)} | |
| onClick={() => setIsOpen(false)} |
| id="search" | ||
| placeholder={t("search.searchPlaceholder")} | ||
| ref={searchRef} | ||
| className="bg-white w-full h-10 px-4 outline-none text-black placeholder:text-black" |
There was a problem hiding this comment.
is placeholder color needed? normal text-black does not affect it?
| localStorage.setItem("searchItems", JSON.stringify(newHistoric)); | ||
| } | ||
|
|
||
| const removeAllSearchHistoricItem = () => { |
There was a problem hiding this comment.
| const removeAllSearchHistoricItem = () => { | |
| const removeAllPreviousSearches = () => { |
2 participants
Add search functionality.